<template>
  <div>
     <view class="good-list">
		<view  class="good-li">
			<image class="good-img" :src="good.goodImg" mode="widthFix"/>
			<view class="flex-item">
				<view class="good-name">{{good.goodName}}</view>
				<view class="good-info">{{good.info}}</view>
				<text class="good-price">{{good.goodPrice}} 积分</text>
	
			</view>
		</view>
	</view>
    <div class="card-box">
      <div class="card-item flex-box border-bottom">
            <div class="strong">兑换数量</div>
            <div class="gury-font"> <uni-number-box :min="0" :max="9" v-model = "goodNum"></uni-number-box> </div>
      </div>
	  <div class="card-item flex-box border-bottom">
            <div class="strong">合计</div>
            <div class="gury-font"> ¥49.00 </div>
      </div>
	  <div class="card-item flex-box border-bottom">
            <div class="strong">我的积分</div>
            <div class="gury-font"> 49.00 </div>
      </div>
	  <div class="card-item flex-box border-bottom">
            <div class="strong">手机号码</div>
            <div class="gury-font"> 18595701884 </div>
      </div>
	  <div class="card-item flex-box">
            <div class="strong">留言备注</div>
            <div class="gury-font"> 123 </div>
      </div>
    </div>
	  <div class="fix-box">
        <div class="fix-buttom" @click="submit">
            确定
        </div>
    </div>
  </div>
</template>

<script>
export default {
    data() {
        return {
			id:'',
			goodNum:0,
            good:{
			"id": "1",
			"goodImg": "https://vkceyugu.cdn.bspapp.com/VKCEYUGU-4f226ab7-4418-4059-b117-7c9c8b33b87c/c3d5a656-3a8b-4952-88a5-68c4c852d6f1.jpeg",
			"goodName": "【1】  六罐装荷兰美素佳儿金装2段900g",
			"info":"仅限合肥市用户",
			"goodPrice": 1,
			"goodSold": 648
		}
        }
    },
	onLoad(opt){
		this.id = opt.id
	},
	methods: {
		async submit(){
		 let res =	await this.$api.http('',{goodNum:this.goodNum, id:this.id})
		 	if(res.status){
				 uni.navigateTo({
					url:'/pages/welfare/detail?id='+id
				})
			 }
			else{
				uni.showToast({
						title: res.msg,
						duration: 2000,
						icon : 'none'
					});
			}
		}
	},
	
}
</script>

<style lang='scss'>
.fix-buttom{
    position: fixed;
    left: 5%;
    width: 90%;
    bottom: 30rpx;
    height: 100rpx;
    color: #fff;
    font-size: 35rpx;
    border-radius: 100rpx;
    background: #00b99e;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fix-box{
    height: 120rpx;
}
page {
  background: #f6f6f6;
}
.gury-font{
	color: #999;
}
.flex-box{
	display: flex;
	justify-content:space-between;
}
.border-bottom{
	border-bottom: 1px solid #f1f1f1;
	padding-bottom: 30rpx;
	margin-bottom: 30rpx;
}
.card-box {
  margin: 20rpx 0;
  padding: 30rpx;
  background: #fff;
}
.good-list{
		background-color: #fff;
		.good-info{
			font-size:20rpx;
			color: #999;
			padding-bottom: 20rpx;
		}
		.good-li{
			display: flex;
			align-items: center;
			padding: 20upx;
			border-bottom: 1upx solid #eee;
			
			.good-img{
				width: 160upx;
				height: 160upx;
				margin-right: 20rpx;
			}
			
			.flex-item{
				flex: 1;
				
				.good-name{
					font-size: 26upx;
					overflow: hidden;
				}
				.good-price{
					font-size: 26upx;
					color: red;
				}
				.good-sold{
					font-size: 24upx;
					margin-left: 16upx;
					color: gray;
				}
				
			}
		}
	}
</style>